<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size">
			
			<el-row style="text-align: left;">
				
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-plus" :label="$t('action.add')"  type="primary" @click="handleAdd" />
				</el-form-item>
				
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="类目"  @click="typeshow" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="启用"  @click="start" type="primary"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-hand-pointer-o" label="停用"  @click="stop" type="primary"/>
				</el-form-item>
				
			</el-row>
			
		</el-form>
	</div>

	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				<el-tooltip content="导出" placement="top">
					<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" ></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns" > 
		</table-column-filter-dialog>
		
	</div>
	<!--表格内容栏-->
	<CyTable :height="350"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
      @handleDelete="handleDelete"
	  @handleEdit="handleEdit"
	  @selectionChange="selectionChange" 
	   ref="CyTable"
	   >
	</CyTable>
	<!--新增编辑界面-->
	<el-dialog :title="operation?'新增':'编辑'" width="30%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="180px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item>
			
			<el-row>

				<el-form-item label="证书类型" prop="number">
						<el-input v-model="dataForm.number" auto-complete="off"></el-input>
				</el-form-item>
				
			</el-row>
			<el-row>
				<el-form-item label="证书" prop="business">
					<el-radio v-model="radio" label="1">必须上传</el-radio>
                    <el-radio v-model="radio" label="2">非必须上传</el-radio>
				</el-form-item>

			</el-row>
			<el-row>
				 <el-form-item label="证书有效期" prop="type">
						<el-radio v-model="radios" label="3">必须上传</el-radio>
                    <el-radio v-model="radios" label="4">非必须上传</el-radio>
				</el-form-item>

			</el-row>
			<el-row>
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" v-model="dataForm.remark" auto-complete="off"></el-input>
				</el-form-item>

			</el-row>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>

	 <!-- 商品类目 -->
    <el-dialog
      title="添加类目限制"
      width="40%"
      :visible.sync="dialogVisibleAddType"
      :close-on-click-modal="false"
    >
      <div style="padding-left: 190px;">
        <el-form :inline="true" :model="filtersType" ref="filters" :size="size">
          <el-form-item prop="type_name">
            <el-input v-model="filtersType.type_name" placeholder="类目名称"></el-input>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" />
          </el-form-item>
        </el-form>
      </div>
      <el-tree :data="dataType" ref="tree" :default-expand-all="true" show-checkbox node-key="id"></el-tree>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisibleAddType = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary"  @click="handleEdit" :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
	
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import CyTable from "@/views/Core/CyTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import XLSX from 'xlsx'
import axios from 'axios'
export default {
	components:{
		PopupTreeInput,
		CyTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			size: 'small',
			radio:'',
			radios:'',
			document_license:'',
					filters: {
				name: '',
				 res:{
					"total": 1,
					"code": "0000",
					"rows": [{
					"number": '1111',
					"type":'必须',
					"bu": '非必须',
					"remark": '暂无'
					},
					{
					"number": '1111',
					"type":'必须',
					"bu": '非必须',
					"remark": '暂无'
					},
					{
					"number": '1111',
					"type":'必须',
					"bu": '非必须',
					"remark": '暂无'
					},]
				}
			},
			value:0,
            testdata:{},
			imgs:'',
			card:'',
			checked:'',
			fileList:{},
			columns: [], 
			tabJson:'',
			warehouselist:[] , 
			filterColumns: [],
			pageRequest: {pageNum: 1, pageSize: 10},
			pageResult: {},
			dialogImageUrl: '',
			
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			printPage: false,
			dialogVisibleImage:false,
			dialogVisibleAddType:false,
			dataFormRules: {
				
				
			},
			dataForm: {
				
			},
			filtersType: {
				type_name: ""
			},
			dataType: [
           {
          id: 1,
          label: "后台类目树",
          children: [
            {
              id: 2,
              label: "母婴用品",
              children: [
                {
                  id: 3,
                  label: "童装童鞋",
                  children: [
                    { id: 6, label: "儿童配饰" },
                    { id: 7, label: "寝居用品" }
                  ]
                },
                {
                  id: 4,
                  label: "喂养餐具",
                  children: [
                    { id: 8, label: "餐椅饭桌" },
                    { id: 9, label: "儿童餐具" },
                    { id: 10, label: "饭兜围嘴" }
                  ]
                }
              ]
            },
				{
				id: 5,
				label: "早教玩具",
				children: [
					{
					id: 11,
					label: "安抚玩具"
					},
					{
					id: 12,
					label: "积木拼图"
					}
				 ]
				}
              ]
            }
           ],
			deptData: [],
			deptTreeProps: {
				label: 'name',
				children: 'children'
			},
			roles: [],
		}
	},
	methods: {
	   // 获取分页数据
		findPage: function (data) {
         this.$refs.CyTable.findPageStaticState(this.filters);
	  },
	  selectionChange (data){
        this.checked=data.selections
	  },
	  start(){
		 if(this.checked.length==0 || this.checked.length>1){
			  this.$message({message:'请选择一条数据' , type: 'error'})
		  }else{
              this.$message({message:'操作成功',type:'success'})
		  } 
	  },
	  stop(){
		 if(this.checked.length==0 || this.checked.length>1){
			  this.$message({message:'请选择一条数据' , type: 'error'})
		  }else{
              this.$message({message:'操作成功',type:'success'})
		  } 
	  },
	  //类目
	  typeshow (){
		  if(this.checked.length==0 || this.checked.length>1){
			  this.$message({message:'请选择一条数据' , type: 'error'})
		  }else{
              this.dialogVisibleAddType=true;
		  }
		  
	  },
        //弹窗关闭方法
		handleClose (){
			 this.$refs.dataForm.resetFields()
		},
		// 批量删除
		  handleDelete: function (data) {
//             var ids='';
//             for(var i=0;i<data.params.length;i++){
//                ids=ids+data.params[i].id+',';
//             }
//             data.t='chargeCard'
//             data.ids=ids
//             this.utils.request.deleteUserInfo(data,this.deleteInfoBack)
               this.$message({ message: '操作成功', type: 'success' })
        },
        //删除callback
        deleteInfoBack(data){
	        if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败, ', type: 'error'})
			}
             this.findPage();
        },

      //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
			let filename="库存盘点"
			this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename)
          }).catch(() => {
 
          });
		},
		// 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm.id="";
			//this.dataForm={};
			if (this.$refs['dataForm']!=undefined) {
				this.$refs['dataForm'].resetFields();
			}
			this.dataForm.document_license="";
		},
		// 打印
		print:function(){
		  this.printPage=true
		  this.operation = true
		},
		reset:function(){
		   this.filters={};
		   this.findPage()
		},
		
		// 显示编辑界面
		handleEdit: function (params) {
			console.log(params)
			this.dialogVisible = true
			this.operation = false
			var this_ = this;
			this.$nextTick(function(){
              this_.dataForm = Object.assign({}, params);
			});
			// var search={};
			// search.id=params.row.id
			// search.t="chargeCard";
			
			// this.utils.request.queryUserInfo(search,function(res){

            //     if(res.code == "0000"){	
			// 		}else{
			// 			this_.$message({message: '获取产品信息异常', type: 'error'});
			// 		}

			// })

		},
		// 编辑
		   submitForm: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
// 	                    var this_ = this;
//                         this.editLoading = true
//                         let params = Object.assign({}, this.dataForm)
//                         params.t='chargeCard';
//                         this.utils.request.editUserInfo(params,this.editInfoBack)
						   this.$message({ message: '操作成功', type: 'success' })
						   this.dialogVisible = false
                    })
                }
            })
        },
        // 新增修改回调
        editInfoBack: function (data) {
			if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败', type: 'error'})
			}
            this.findPage();
            this.dialogVisible = false
            this.operation = false
            this.editLoading= false
        },
      
		
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},

		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				//{prop:"id", label:"ID", minWidth:50},
				{prop:"number", label:"证书类型", minWidth:120},
				{prop:"type", label:"证书", minWidth:120},
				{prop:"bu", label:"帧数有效期", minWidth:120},
				{prop:"remark", label:"说明", minWidth:120},				
			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns)); 
      	},
       
      
	},
	mounted() {
		this.initColumns()
	}
	
	
}
 
		
</script>

<style scoped>
 /deep/ .el-input__inner {
    width: 200px;
}
 .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
 

</style>